<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body onload="f();newRequestCount();changeHistoryMsg()">
<div id="app">
    <!--    {{message}}-->
    <div class="layout">
        <layout :style="{minHeight: '100vh'}">
            <sider collapsible :collapsed-width="78" v-model="isCollapsed">
                <i-menu theme="dark" width="auto" :class="menuitemClasses" open-names="['1','2']">
                    <submenu name="1">
                        <template slot="title">
                            个人中心
                            <icon type="ios-paper"/>
                        </template>
                        <menu-item name="1-1"><span onclick="MoreInfo()">完善信息</span></menu-item>
                        <menu-item name="1-2">
                            <span>留言板</span>
                        </menu-item>
                        <menu-item name="1-3">
                            <span onclick="Questions()">
                                调查问卷
                            </span></menu-item>
                        <menu-item name="1-4">
                            <span onclick="Analyzing()">
                                分析结果
                            </span></menu-item>
                    </submenu>
                    <submenu name="2">
                        <template slot="title">聊天室
                            <icon type="ios-people" />
                        </template>
                        <Badge :count="countNewRequest">
                        <menu-item name="2-1">
                            <span onclick="FriendList()">好友列表</span>
                        </menu-item></Badge>
                        <menu-item name="2-2">
                            <span onclick="chat()">聊天室</span>
                        </menu-item>
                    </submenu>
                </i-menu>
            </sider>
            <layout>
                <i-header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                    <div style="float: left;margin-left: 70%">
                        <h1>欢迎您 ! &nbsp;&nbsp; {{message}}</h1>
                    </div>
                    <a href="/Login" style="margin-left: 50px"> 注销</a>
                </i-header>
                <i-content :style="{padding: '0 16px 16px'}">
                    <breadcrumb :style="{margin: '16px 0'}">
                        留言板
                    </breadcrumb>
                    <card >
                        <div  v-for="i in list">
                        <divider orientation="left">From : {{i.from_name}} &nbsp;&nbsp;{{i.date_time}}</divider>
                            <p>{{i.board_text}}</p>
                        </div>
                    </card>
                </i-content>
            </layout>
        </layout>
    </div>
</div>

</body>
<script>
    function changeHistoryMsg() {
        $.ajax({
            url:'/stu/changeHistoryMsg',
            type:'post'
        })
    }
    function newRequestCount(){
        $.ajax({
            url:'/stu/newRequestCount',
            type:'post',
            success(res) {
                mVue.countNewRequest=res;
                console.log(res);
            }
        })
    }
    var uu;
    function f(){
        $.ajax({
            url:'/search',
            type:'post',
            success(res) {
                let msg=JSON.stringify(res);
                msg=$.parseJSON(msg);
                uu=msg;
                console.log(res);
                if(res.sname==null){
                    active("新用户!","请完善你的个人信息");
                }else{
                    active(msg.sname);
                    showBoardMsg();
                }
            }
        })
    }
    function active(res,ss) {
        mVue.message=res;
        mVue.info=ss;
    }
    function showBoardMsg() {
        $.ajax({
            url:'/stu/Board/getBoard',
            type:'post',
            success(res) {
                msg=JSON.stringify(res);
                msg=$.parseJSON(msg);
                mVue.list=msg;
                console.log(JSON.stringify(res));
                console.log(res);

            }
        })
    }

    var mVue = new Vue({
        el:'#app',
        data(){
            return {
                countMsg:'',
                countNewRequest:'',
                list:[],
                message: '',
                info: '',
                isCollapsed: false,
                choose: '',
                result: '',
                thanks: '',
            }
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            },
        },
        methods:{
        }
    });

    function chat() {
        mVue.choose="chat";
        window.location.href="/stu/chat";
    }
    function Questions() {
        mVue.choose="Questions";
        window.location.href="/stu/Questions/";
    }
    function Analyzing() {
        mVue.choose="Board";
        window.location.href="/stu/Analyzing/";
    }
    function FriendList() {
        mVue.choose="FriendList";
        window.location.href="/stu/FriendList/";
    }
    function MoreInfo() {
        // mVue.choose="Questions";
        window.location.href="/stu/MoreInfo/";
    }

</script>
</html>